<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户新增</el-breadcrumb-item>
  </el-breadcrumb>  

  <el-row class="margintop20">
    <el-col>
        <el-steps :active="active" finish-status="success">
              <el-step title="加入终结影院大家庭" description="输入您的用户名和电话"></el-step>
              <el-step title="挑选权级" description="你的选择，是对我们最大的信任"></el-step>
              <el-step title="成为终结一班的成员" description="快去看看吧！"></el-step>
        </el-steps>
    </el-col>
    <el-col class="margintop20">
        <div v-show="active==1" style="width:30%">
            <el-form 
                :model="form" 
                :rules="rules"
                ref="myform" 
                label-width="100px"
                label-position="top" 
                class="myform">
                <el-form-item label="手机号码" prop="mobile">
                        <el-input v-model="form.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="呢称" prop="username">
                        <el-input v-model="form.username" ></el-input>
                    </el-form-item>
            </el-form>

            <el-button type="primary" @click="gotonextone">下一步</el-button>
        </div>
       <div v-show="active==2" class="box2">
            <div class="margintop20">
              <el-form
              :model="form" 
              :rules="rules"
              label-position="top" 
              >
                <el-form-item label="角色" prop="roleid">
                        <el-select v-model="form.roleid">
                            <el-option v-for="(role,i) in roleList" 
                                :key="i"
                                :label="role.label"
                                :value="role.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="password" style="width:300px">
                        <el-input  type="password" v-model="form.password"></el-input>
                    </el-form-item>
                  </el-form>
                <el-button type="danger" @click="active--">上一步</el-button>
                <el-button type="primary" @click="gotonext">下一步</el-button>
            </div>
        </div>
         <div v-show="active==3" class="box3">
            <div v-if="form" class="box4">
              <h2>提交单</h2>
              <p>姓名：{{form.username}}</p>
              <p>电话：{{form.mobile}}</p>
              <p>密码：{{form.password}}</p>
              <p>权限等级：{{form.roleid}}</p>
              <h2>请再次确认信息</h2>
            </div>
            <div class="box5">
              <el-button type="danger" @click="active--">上一步</el-button>
              <el-button type="success" @click="addtosome">注册成为会员</el-button>
            </div>
        </div>
      </el-col>
  </el-row>
</div>
</template>

<script>
import {roleList} from "@/utils"
import {zhuce} from "@/api"
export default {
    data(){
      return{
        active:1,
        roleList,
        form:{
                username:"终结的XXX",
                password:"abc123"
            },
        rules:{
           mobile:[
                    {required:true,message:"请输入手机号码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var mobileReg = /^1(3|5|6|7|8|9)\d{9}$/
                            if(mobileReg.test(value)){
                                callback()
                            }else{
                                callback(new Error("请输入正确的手机号码"));
                            }
                        },
                        trigger:'change'
                    }
                ],
                password:[
                    {required:true,message:"请输入登录密码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<4){
                                callback(new Error("密码长度至少4位"));
                            }else if(value.length>12){
                                callback(new Error("密码长度最多12位"));
                            }else if(!passReg.test(value)){
                                callback(new Error("请输入正确的密码"));
                                
                            }else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
                ],
                roleid:[
                    {required:true,message:"请选择用户角色类型",trigger:"blur"}
                ],
                username:[
                    {required:true,message:"请输入用户名称",trigger:"blur"}
                ],
        }
      }
    },
    methods:{
      gotonextone(){
            this.$refs.myform.validate(valid=>{
                if(valid){
                    this.active++;
                }else{
                    this.$                                                                                                                                    .error("请先完善意见信息")
                    return false;
                }
            })
        },
        gotonext(){
            if(this.form.roleid){
                this.active++;
            }else{
                this.$message.error("请先完善意见")
            }
        },
        addtosome(){
          this.$refs.myform.validate(valid=>{
                if(valid){
                zhuce(this.form)
                .then(res=>{
                    
                })
                }
        })
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-breadcrumb__inner{
    color: rgb(240, 124, 124) !important;
  }
  .el-breadcrumb{
  font-size: 30px;
}
.box2{
    margin-left: 600px;
}
.box3{
    margin-left: 1200px;
}
.box4{
  position: absolute;
  top: 100px;
  right: 300px;
  width: 250px;
  height: 200px;
  background-color: rgb(208, 228, 32);
  border: 5px solid rgb(255, 0, 170);
  border-radius: 10px;
  text-align: center;
  line-height: 35px;
  color: rgb(48, 46, 46);
  font-size: 20px;
}
.box5{
  margin-top: 150px;
}
::v-deep .el-form-item__label{
  color: red;
  font-size: 20px;
}
</style>